<template>
  <div class="content">
    <p>使用组合式</p>
    <p>store数据姓名：{{ userDetail.username }}</p>
    <p>store数据年龄：{{ userDetail.age }}</p>
    <el-button class="bg-sky-600" type="primary" @click="updateUserInfo">修改用户信息</el-button>
    <p>接收父组件参数：{{ props.modelValue }}</p>
    <p>reactive输出: {{ data.useWay }}</p>
    <p @click="$emit('lookTestData', 'test')">年龄：{{ age }}</p>
    <div>{{ data.updateTitle }}</div>
    <div style="margin: 20px;" @click="emitBus">事件总线</div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, reactive, computed } from 'vue'
import userInfo from '@/store/modules/user'
import eventBus from '@/utils/eventBus'
const userDetail = userInfo()
const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  user: {
    type:Object,
    required: true,
    default: () => {}
  }
})
const query = ref('测试')
const query2 = ref({
  title: '在测试'
})
const data = reactive({
  useWay: 'reactive使用',
  updateTitle: '测试改变'
})
onMounted(() =>{
  init()
})
watch(() => props.modelValue, (newVal, oldVal) => {
  console.log('watch', newVal, oldVal)
})
watch(() => props.user.age, (newVal, val) => {
  console.log(newVal, val);
  if (newVal !== val) {
    data.updateTitle = '哈哈'
  }
}, {
  deep: true
})
watch(query, (newVal, oldVal) => {
  console.log('watch-title', newVal, oldVal)
})
watch(()=> query2.value.title, (newVal, oldVal) => {
  console.log('watch-title2', newVal, oldVal)
})
watch(() => userDetail.username, (newVal, oldVal) => {
  console.log('watch-username', newVal, oldVal)
})
function init() {
  console.log('初始化===' + query.value)
}
function updateUserInfo() {
  query.value = '改变了'
  query2.value.title = '改变了2'
  $emit('update:user', { name: 'user', age: 19})
  userDetail.updateUserInfo({
    username: 'Ben',
    age:33
  })
}
const age = computed(() => userDetail.age * 2)
console.log('年龄', age.value)

function testExport () {
  console.log('看看导出没')
}
const emitBus = () => {
  eventBus.$emit('test', '测试')
}
const $emit = defineEmits(['update:user'])
defineExpose({
  data,
  testExport
})
</script>

<style lang="scss" scoped>

</style>